<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="审批信息"
        fullscreen
    >
        <div class="edit_page_div">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="审批信息" name="1">
                    <div class="flowableName">{{ billValue.flowableName }}</div>
                    <img class="statusName" alt="" :src="$store.state.fileURL+imageStatus[billValue.formStatus]">
                    <div class="approveInfo" :class="disabled?'approveInfoTrue':'approveInfoFalse'">
                        <recruit-apply-detail v-if="billValue.flowableCode=='recruitApply'" :form-value="billValue.formValue" :field-status="billValue.fieldStatus" :disabled="disabled"></recruit-apply-detail>
                        <train-apply-detail v-else :form-value="billValue.formValue" :field-status="billValue.fieldStatus" :disabled="disabled"></train-apply-detail>
                        <div class="approveDiv">
                            <div class="approveDivItem" v-for="item in billValue.reviewedList">
                                <div class="approveDivTitle">{{ item.name }}：</div>
                                <div class="approveDivMessage">
                                    {{ item.assignee }}
                                    <el-tag :type="item.actType=='同意' ? 'success':item.actType=='拒绝' ? 'danger' : 'info'" size="small">{{ item.actType }}</el-tag>
                                    {{ item.message }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="approveMessage" v-if="disabled">
                        <el-form ref="form" :model="form" :rules="rules" :show-message="false" label-width="100px">
                            <el-form-item label="审批意见" prop="newsMessage">
                                <el-input v-model="form.newsMessage" type="textarea" :rows="3" style="width: 100%;"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="approveButton">
                        <el-button v-if="billValue.buttonList?.indexOf('1')>-1&&disabled" type="primary" @click="adoptData">同意</el-button>
                        <el-button v-if="billValue.buttonList?.indexOf('2')>-1&&disabled" type="primary" @click="refuseData">拒绝</el-button>
                        <el-button v-if="billValue.buttonList?.indexOf('3')>-1&&disabled" type="primary" @click="readData">已阅</el-button>
                        <el-button type="primary" @click="resetForm">关闭</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="工作流图" name="2">
                    <img class="precessImg" alt="" :src="'data:image/png;base64,' + processImg" width="800px">
                </el-tab-pane>
                <el-tab-pane label="审批记录" name="3">
                    <div class="precessList">
                        <div @click.self="commendList=processList" style="background-color: #CCFFC5;">总人数（{{processList.length}}）</div>
                        <div @click.self="commendList=approvedList" style="background-color: #EDEDED;">已审核（{{approvedList.length}}）</div>
                        <div @click.self="commendList=approveList" style="background-color: #EDEDED;">未审核（{{approveList.length}}）</div>
                    </div>
                    <div class="approveList">
                        <div class="titleDiv">
                            <div style="width: 260px">节点名称</div>
                            <div style="width: 260px">审核人</div>
                            <div style="width: 260px">开始时间</div>
                            <div style="width: 260px">结束时间</div>
                        </div>
                        <div class="contentDiv" v-for="item in commendList">
                            <div style="width: 260px">{{ item.name }}</div>
                            <div style="width: 260px">{{ item.assignee }}</div>
                            <div style="width: 260px">{{ item.receiveTime }}</div>
                            <div style="width: 260px">{{ item.approvalTime }}</div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-dialog>
</template>

<script>
import RecruitApplyDetail from "./recruitApplyDetail.vue";
import TrainApplyDetail from "./trainApplyDetail.vue";

export default {
    name: "approveDetail",
    components: {TrainApplyDetail, RecruitApplyDetail},
    props: {
        visible: Boolean,
        id: String,
        disabled: Boolean,
    },
    data() {
        return {
            loading: false,
            imageStatus: {
                '已通过': 'demo/20221115/tag_approved.png',
                '已撤回': 'demo/20221115/tag_back.png',
                '审批中': 'demo/20221115/tag_checking.png',
                '不通过': 'demo/20221115/tag_rejected.png',
            },
            activeName: '1',

            billValue: {
                flowableCode: '',
                flowableName: '',
                formJson: [],
                formValue: {
                    institutionId: '',
                    institutionName: '',
                    trainTitle: '',
                    trainContent: '',
                },
                fieldStatus: {},
                formStatus: '',
                processNum: '',
                reviewedList: [],
                unreviewedList: [],
                buttonList: [],
                processInstanceId: '',
                processDefinitionId: '',
            },
            form: {
                newsMessage: '',
            },
            rules: {
                newsMessage: [{required: true, message: '', trigger: 'change'}],
            },
            processImg: '',

            commendList: [],
            processList: [],
            approvedList: [],
            approveList: [],

        }
    },
    watch: {
        visible(newVal) {
            if (newVal) {
                if (this.id) {
                    this.getData();
                }
            }
        }
    },
    methods: {
        handleClick(tab, event) {
            if (tab.name == "3") {
                this.processList.forEach(temp => {
                    this.commendList.push(temp);
                });
            }
        },
        getData() {
            this.loading = true;
            this.$axios.get("/CHILD_WORKFLOW/flowProcess/getDetailData/" + this.id).then(res => {
                this.billValue = res.data;
                this.getPrecessImg();
                this.setProcessList();
            }).catch(() => {
                this.loading = false;
            })
        },
        getPrecessImg() {
            this.$axios.get("/CHILD_WORKFLOW/flowModel/image", {
                procInstId: this.billValue.processInstanceId,
            }).then(res => {
                this.processImg = res.data;
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            })
        },
        adoptData() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.form.id = this.billValue.id;
                    this.form.values = this.billValue.formValue;
                    this.$axios.post("/CHILD_WORKFLOW/flowProcess/adopt", this.form).then(res => {
                        this.resetForm();
                        this.$message.success("审核通过成功！");
                        this.loading = false;
                    }).catch(() => {
                        this.loading = false;
                    })
                } else {
                    this.$message.error('表单填写有误');
                    return false;
                }
            });
        },
        refuseData() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.form.id = this.billValue.id;
                    this.$axios.post("/CHILD_WORKFLOW/flowProcess/refuse", this.form).then(res => {
                        this.resetForm();
                        this.$message.success("审核拒绝成功！");
                        this.loading = false;
                    }).catch(() => {
                        this.loading = false;
                    })
                } else {
                    this.$message.error('表单填写有误');
                    return false;
                }
            });
        },
        readData(){
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.form.id = this.billValue.id;
                    this.$axios.post("/CHILD_WORKFLOW/flowProcess/read", this.form).then(res => {
                        this.resetForm();
                        this.$message.success("已阅成功！");
                        this.loading = false;
                    }).catch(() => {
                        this.loading = false;
                    })
                } else {
                    this.$message.error('表单填写有误');
                    return false;
                }
            });
        },
        setProcessList() {
            const processList = [];
            this.billValue.reviewedList.forEach(temp => {
                processList.push(temp);
            })
            this.billValue.unreviewedList.forEach(temp => {
                processList.push(temp);
            })
            this.processList = processList
            processList.forEach(temp => {
                if (temp.actType == '未审') {
                    this.approveList.push(temp);
                } else {
                    this.approvedList.push(temp);
                }
            });
        },
        resetForm() {
            this.$emit('update:visible', false);
            this.$emit('refreshList');
        },
    }
}
</script>

<style lang="scss">
.flowableName {
    text-align: center;
    font-size: 30px;
    margin: 10px;
    height: 60px;
    line-height: 60px;
}

.statusName {
    position: absolute;
    right: 30px;
    top: 10px;
    width: 150px;
}

.approveInfoTrue {
    max-height: 480px;
}

.approveInfoFalse{
    height: 630px;
}

.approveInfo {
    margin-left: calc((100vw - 1000px)/2);
    overflow-y: auto;

    .approveDiv {
        .approveDivItem {
            width: 1000px;
            height: 50px;

            .approveDivTitle {
                width: 100px;
                float: left;
                text-align: right;
                line-height: 50px;
                font-size: 22px;
                margin-right: 20px;
            }

            .approveDivMessage {
                float: left;
                font-size: 22px;
                line-height: 50px;
            }
        }
    }
}

.approveMessage {
    margin-left: calc((100vw - 1000px)/2);
    width: 1000px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.approveButton {
    margin-top: 20px;
    text-align: center;
}

.precessImg {
    width: 1180px;
    height: 700px;
}

.precessList {
    margin-left: 200px;

    div {
        text-align: center;
        float: left;
        width: 200px;
        height: 60px;
        line-height: 60px;
        font-size: 22px;
        font-weight: bold;
        margin: 20px;
        border: #EBEEF5 solid 1px;
    }
}

.approveList {
    margin-left: 100px;

    .titleDiv {
        border-top: #EBEEF5 1px solid;;
        border-left: #EBEEF5 1px solid;
        border-bottom: #EBEEF5 1px solid;

        div{
            text-align: center;
            height: 40px;
            line-height: 40px;
            float: left;
            font-size: 18px;
            font-weight: bold;
            border-right: #EBEEF5 1px solid;
        }
    }

    .contentDiv {
        border-left: #EBEEF5 1px solid;
        border-bottom: #EBEEF5 1px solid;

        div{
            text-align: center;
            height: 30px;
            line-height: 30px;
            float: left;
            font-size: 14px;
            border-right: #EBEEF5 1px solid;
        }

    }
}

</style>